<template>
  <div>
    <template  v-if="type==='picture'">
      <el-upload
        class="upload-demo"
        action=""
        :multiple=false
        :before-upload="handleIconUpload"
        list-type="picture">
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>
      <!-- 展示已选的图标文件 -->
      <div v-if="url">
        <img :src="url||this.formObject[this.formKey]" alt="已选图标" />
      </div>
    </template>
    <template  v-if="type==='file'">
      <el-upload
        class="upload-demo"
        action=""
        :multiple=false
        :before-upload="handleIconUpload"
        list-type="text"
        >
        <el-button size="small" type="primary">点击上传</el-button>
        <span v-if="filename">
          {{filename ||this.formObject[this.formKey]}}
        </span>
      </el-upload>

    </template>
  </div>
</template>

<script>
import { FileUpload } from '@/api/qysj/app/DataBaseInfo'

export default {
  name: 'UploadFileOrPic',
  props:{
    formObject:Object,//绑定的表单对象
    formKey:String,//绑定表单对象属性
    type:String,//上传文件还是图片 ‘file’还是‘picture’
  },
  data(){
    return{
      url:'',
      filename:''
    }
  },
  methods:{
    handleIconUpload(file){
      const form=new FormData()
      form.append('file',file);
      FileUpload(form).then(res=>{
        if (res.code===200){
          // this.$emit('update-bind-value',res.url)
          this.formObject[this.formKey]=res.url;
          this.url=res.url;
          this.filename=res.originalFilename
        }
      })
      return false;
    },
  }
}
</script>


<style scoped lang="scss">
img{
  width: 50px;
  height: 50px;
}
</style>
